<template>
  <div class="statistics">
    <div class="count-group">
      <div class="box">
        <div class="title">总CPU算力<span>核数</span></div>
        <div class="body">
          <div class="num"><i-count-up
              class="counter-value"
              :endVal="opsVal.cpu"
              :options="options"
            ></i-count-up>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="title">总GPU算力<span>OPS</span></div>
        <div class="body">
          <div class="num"><i-count-up
              class="counter-value"
              :endVal="opsVal.gpu"
              :options="options"
            ></i-count-up></div>
        </div>
      </div>
      <div class="box">
        <div class="title">总TPU算力<span>OPS</span></div>
        <div class="body">
          <div class="num"><i-count-up
              class="counter-value"
              :endVal="opsVal.tpu"
              :options="options"
            ></i-count-up></div>
        </div>
      </div>
      <div class="box">
        <div class="title">总DPU算力<span>OPS</span></div>
        <div class="body">
          <div class="num"><i-count-up
              class="counter-value"
              :endVal="opsVal.dpu"
              :options="options"
            ></i-count-up></div>
        </div>
      </div>
      <div class="box">
        <div class="title">总NPU算力<span>OPS</span></div>
        <div class="body">
          <div class="num"><i-count-up
              class="counter-value"
              :endVal="opsVal.npu"
              :options="options"
            ></i-count-up></div>
        </div>
      </div>
      <!-- <div class="box">
        <div class="title">总BPU算力<span>OPS</span></div>
        <div class="body">
          <div class="num"><i-count-up class="counter-value" :endVal="opsVal.bpu" :options="options"></i-count-up></div>
        </div>
      </div> -->
      <!-- <div class="box">
        <div class="title">总HPC算力<span>TFLOPS</span></div>
        <div class="body">
          <div class="num"><i-count-up class="counter-value" :endVal="opsVal.hpc" :options="options"></i-count-up></div>
        </div>
      </div> -->
    </div>
    <div class="numbers">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="box">
            <el-row :gutter="10">
              <el-col :span="8">
                <div class="item">
                  <div class="num"><i-count-up
                      class="counter-value"
                      :endVal="4"
                      :options="options"
                    ></i-count-up></div>
                  <div class="name">数据中心(座)</div>
                </div>
              </el-col>
              <!-- <el-col :span="isADMIN ? 6 : 8">
                <div class="item">
                  <div class="num">{{workersNum || 0}}</div>
                  <div class="name">总机架数(个)</div>
                </div>
              </el-col> -->
              <el-col :span="8">
                <div class="item danger">
                  <div class="num"><i-count-up
                      class="counter-value"
                      :endVal="taskNum||0"
                      :options="options"
                    ></i-count-up></div>
                  <div class="name">正在运行任务(个)</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="item danger">
                  <div class="num"><i-count-up
                      class="counter-value"
                      :endVal="reqNum||0"
                      :options="options"
                    ></i-count-up></div>
                  <div class="name">调度请求(次)</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <el-row :gutter="10">
              <el-col :span="6">
                <div class="item">
                  <div class="num"><i-count-up
                      class="counter-value"
                      :endVal="processDefinitionNum||0"
                      :options="options"
                    ></i-count-up></div>
                  <div class="name">工作流模型(个)</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="item">
                  <div class="num"><i-count-up
                      class="counter-value"
                      :endVal="fileNum||0"
                      :options="options"
                    ></i-count-up></div>
                  <div class="name">文件资源(个)</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="item ">
                  <div class="num"><i-count-up
                      class="counter-value"
                      :endVal="udfNum||0"
                      :options="options"
                    ></i-count-up></div>
                  <div class="name">UDF资源(个)</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="item ">
                  <div class="num"><i-count-up
                      class="counter-value"
                      :endVal="datasourceNum||0"
                      :options="options"
                    ></i-count-up>
                  </div>
                  <div class="name">数据源(个)</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import io from '@/module/io'
  import ICountUp from 'vue-countup-v2'
  import store from '@/conf/home/store'
  import { random } from '@/module/util/util'
  export default {
    components: {
      ICountUp
    },
    props: {
      unit: {
        type: String,
        default: 'p'
      }
    },
    data () {
      return {
        random,
        options: {
          duration: 1,
          useEasing: false,
          useGrouping: true,
          separator: ',',
          decimal: '.',
          // decimalPlaces: 2,
          prefix: '',
          suffix: ''
        },
        // isADMIN: store.state.user.userInfo.userType === 'ADMIN_USER',
        ops: {
          cpu: 260,
          gpu: 130,
          tpu: 340.23,
          hpc: 700 * 1000 * 1000,
          dpu: 296,
          npu: 70,
          bpu: 290
        },
        opsVal: {
          cpu: 260,
          gpu: 130,
          tpu: 0,
          hpc: 700,
          dpu: 0,
          npu: 0,
          bpu: 60
        },
        workersNum: 0,
        reqNum: 0,
        processDefinitionNum: 0,
        fileNum: 0,
        udfNum: 0,
        datasourceNum: 0
      }
    },
    watch: {
      unit (newval) {
        // this.formatVal()
      }
    },
    created () {
      // this.formatVal()
      this.getCount()
    },
    methods: {
      formatVal () {
        let ops = _.cloneDeep(this.ops)
        switch (this.unit) {
          case 'p':
            Object.keys(ops).forEach(e => {
              ops[e] = (ops[e] / 1000 / 1000 / 1000).toFixed(3)
            })
            break
          case 't':
            Object.keys(ops).forEach(e => {
              ops[e] = (ops[e] / 1000 / 1000).toFixed(3)
            })
            break
          case 'g':
            Object.keys(ops).forEach(e => {
              ops[e] = (ops[e] / 1000).toFixed(3)
            })
            break
          case 'm':
            break
          default:
            break
        }
        this.opsVal = ops
      },
      getCount () {
        // 总机架数
        io.get('monitor/workersNum', {}, res => {
          if (res.code === 0) this.workersNum = res.data
        }).catch(e => {
          console.error(e)
        })
        // this.taskNum = random(10, 99)
        // 运行任务
        io.get('projects/process-instances/instance-num', { stateType: 1 }, res => {
          this.taskNum = res.data.length
        }).catch(e => {
          console.error(e)
        })
        // 调度请求
        io.get('projects/process-instances/instance-num', { stateType: 0 }, res => {
          this.reqNum = res.data.length
        }).catch(e => {
          console.error(e)
        })
        // 模型资源数：/dolphinscheduler/projects/overview/process-definition-num
        io.get('projects/overview/process-definition-num', {}, res => {
          this.processDefinitionNum = res.data
        }).catch(e => {
          console.error(e)
        })
        // 文件资源数：/dolphinscheduler/projects / overview / process - file - num
        io.get('projects/overview/process-file-num', {}, res => {
          this.fileNum = res.data
        }).catch(e => {
          console.error(e)
        })
        // UDF资源：/dolphinscheduler/projects / overview / process - udf - num
        io.get('projects/overview/process-udf-num', {}, res => {
          this.udfNum = res.data
        }).catch(e => {
          console.error(e)
        })
        // 数据源：/dolphinscheduler/projects / overview / process - datasource - num
        io.get('projects/overview/process-datasource-num', {}, res => {
          this.datasourceNum = res.data
        }).catch(e => {
          console.error(e)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.count-group {
  display: flex;
  // flex-wrap: nowrap;
}
.box {
  flex: 1;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 12px !important;
      font-weight: normal;
      color: #999999;
    }
  }
  .body {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .num {
      margin: 0 auto;
      font-size: 40px;
      font-family: Oxanium, Oxanium-Bold;
      font-weight: 700;
      color: #f27011;
      line-height: 40px;
      em {
        font-size: 16px;
        font-style: normal;
      }
    }
  }
  .item {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    background: rgba(51, 49, 126, 0.1);
    border-radius: 8px;
    color: #33317e;
    .name {
      font-size: 16px;
    }
    .num {
      font-size: 40px;
      font-family: Oxanium, Oxanium-Bold;
      font-weight: 700;
    }
  }
  .item.danger {
    background: rgba(242, 112, 17, 0.1);
    color: #f27011;
  }
}
.box + .box {
  margin-left: 10px;
}
.numbers {
  margin-top: 20px;
}
</style>
